<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <script>
        function print(){
            var username = document.getElementById("username").value;
            var password= document.getElementById("password").value;
            var sex=document.getElementsByName("sex").value;
            
            
            document.getElementById("result").append("账号是："+username+"密码是:"+password+"性别是:"+sex);
        }
    </script>
    
    <style>
        form{
            border:solid;
            width: 400px;
            margin:auto;
            margin-bottom: 50px;
            border-radius: 20px;
            text-align: center;
            padding:50px;
        }
    </style>
</head>

<body>
    <form>
      <lable>账号：</lable><input type="text" id="username">
        <br>
        <lable>密码：</lable><input type="password" id="password">
        <br>

      <input type="radio" name="sex" value="男"><label>男</label>
      <input type="radio" name="sex" value="女"><label>女</label>
        <br>
        <label>我感兴趣的课程：</label><br>
            <input type="checkbox" name="duoxuan" checked><label>语文</label>
            <input type="checkbox" name="duoxuan"><label>数学</label>
            <input type="checkbox" name="duoxuan"><label>英语</label>
            <input type="checkbox" name="duoxuan"><label>计算机</label>
            <input type="checkbox">
        <br>
            感兴趣的选修课：
            <select>
                <option>计算机组装</option>
                <option>网页设计与制作</option>
                <option>Photoshop</option>
            </select>
        
            
        <br>
        <input type="button" value="提交" onclick="print()">
        
</form>
    <div id="result" style="border:solid">输出结果：<br></div>
</body>
</html>
